<template>
  <div class="masonry">
    <el-alert
      v-if="!source"
      title="暂无数据 或 数据加载中"
      type="warning"
      :closable="false"
    >
    </el-alert>
    <el-card
      v-for="item in missingSource"
      :key="item.itemTitle + '_missing'"
      :body-style="{ padding: '10px 5px' }"
      shadow="hover"
      class="box-card item"
    >
      <div
        slot="header"
        class="clearfix"
      >
        <el-badge
          :value="item.count"
          :type="item.count > 0 ? 'danger' : 'info'"
        >
          <span style="padding-right: 10px">{{ item.itemTitle }}</span>
        </el-badge>
        <el-tag
          :type="item.count > 0 ? 'danger' : 'info'"
          :effect="item.count > 0 ? 'dark' : 'plain'"
          size="small"
        >缺失信息</el-tag>
      </div>
      <div style="
          display: flex;
          width: 100%;
          flex-wrap: wrap;
          justify-content: center;
          align-items: center;
        ">
        <el-tag
          style="margin: 3px 5px"
          type="danger"
          :size="viewSize.width > viewSize.threshold ? 'medium' : 'small'"
          v-for="name in item.content"
          :key="name"
        >{{ name }}</el-tag>
      </div>
    </el-card>
    <el-card
      v-for="item in notifySource"
      :key="item.itemTitle"
      :body-style="{ padding: '10px' }"
      shadow="hover"
      class="box-card item"
    >
      <div
        slot="header"
        class="clearfix"
      >
        <el-badge
          :value="item.count"
          :type="item.count > 0 ? 'warning' : 'info'"
        >
          <span style="padding-right: 10px">{{ item.itemTitle }}</span>
        </el-badge>
        <el-tag
          :type="item.count > 0 ? 'warning' : 'info'"
          :effect="item.count > 0 ? 'dark' : 'plain'"
          size="small"
        >
          {{ item.thresholdDays }}天内到期
        </el-tag>
      </div>
      <el-table
        :data="item.content"
        style="width: 100%"
        :size="viewSize.width > viewSize.threshold ? 'medium' : 'small'"
        :default-sort="{ prop: 'itemValue', order: 'ascending' }"
      >
        <el-table-column
          label="#"
          width="40"
        >
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="clientName"
          label="姓名"
          :sortable="viewSize.width > viewSize.threshold"
          width="80"
        >
        </el-table-column>
        <el-table-column
          prop="itemValue"
          label="到期日期"
          :sortable="viewSize.width > viewSize.threshold"
        >
        </el-table-column>
        <el-table-column label="剩余天数">
          <template slot-scope="scope">
            <span>{{ expiredDaysString(scope.row.itemValue) }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: "notifyView",
    data() {
      return {};
    },
    computed: {
      viewSize() {
        return this.$store.state.viewSize;
      },
      source() {
        return this.$store.state.notifySource;
      },
      notifySource() {
        if (!this.source) return [];
        return this.source.notify;
      },
      missingSource() {
        if (!this.source) return [];
        return this.source.missing;
      },
    },
    methods: {
      calacExpiredDays(date_str) {
        let d0 = new Date().getTime();
        let d1 = new Date(date_str).getTime();
        let days = Number.parseInt((d1 - d0) / 86400000);
        return days;
      },
      expiredDaysString(date_str) {
        let value = this.calacExpiredDays(date_str);
        if (value > 0) return "剩余" + value + "天";
        value = -value;
        return "过期" + value + "天";
      },
    },
    mounted() {
      this.$store.dispatch("loadNotifySource");
      // if (!this.notifySource) {
      //   this.$store.dispatch("loadNotifySource");
      // }
    },
    created() {
      // this.$store.dispatch("loadNotifySource");
    },
  };
</script>

<style scoped>
  .masonry {
    width: 96vw;
    margin: 20px auto;
    columns: 3;
    column-gap: 30px;
  }

  @media screen and (min-width: 1024px) and (max-width: 1279.98px) {
    .masonry {
      width: 100%;
      columns: 2;
      column-gap: 20px;
    }
  }

  @media screen and (min-width: 768px) and (max-width: 1023.98px) {
    .masonry {
      width: 100%;
      columns: 2;
      column-gap: 20px;
    }
  }

  @media screen and (max-width: 767.98px) {
    .masonry {
      width: 100%;
      column-gap: 0;
      columns: 1;
    }
  }

  .item {
    width: 100%;
    break-inside: avoid;
    margin-bottom: 30px;
  }

  .clearfix {
    clear: both;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
  }
</style>